<template>
  <div class="Community">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="ForumCategoryListShow = true">
          <span class="iconfont icon-xinzengfenlei"></span>
        </div>
      </template>
      <template #middle>
        <div class="middle"><span class="title">葫芦侠社区</span></div>
      </template>
      <template #right>
        <div class="right" @click="$router.push('/MsgView')">
          <span class="iconfont icon-xiaoxi"></span>
        </div>
      </template>
    </top-title-bar>
    <div class="wrap">
      <!-- 轮播图 -->
      <div class="banner" v-if="bannerList">
        <van-swipe class="my-swipe" :autoplay="3000" :show-indicators="false">
          <van-swipe-item
            class="my-swipe-item"
            v-for="item in bannerList"
            :key="item.postId"
            ><router-link
              tag="div"
              :to="'/PostDetails?postID=' + item.postID + '&from=葫芦侠社区'"
              class="img"
            >
              <van-image :src="item.coverUrl" @error="errorEventImg">
                <template v-slot:error>加载失败</template>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
              <p class="text-ellipsis-1">
                {{ item.title }}
              </p>
            </router-link></van-swipe-item
          >
        </van-swipe>
      </div>

      <!-- 我的板块 -->
      <div class="me" v-if="ForumCategoryList">
        <div class="head">
          <h4>我的板块</h4>
        </div>
        <div class="body">
          <div class="item" @click="$toast('我的关注都在这')">
            <div class="img">
              <img
                src="../assets/img/CommunityView/community-me-1.png"
                alt=""
              />
            </div>
            <span>我的关注</span>
          </div>
          <router-link
            :to="'/PostView?cat_id=' + item.categoryID"
            tag="div"
            class="item"
            v-show="item.isSubscribe"
            v-for="item in ForumCategoryList"
            :key="item.title"
          >
            <div class="img">
              <van-image :src="item.icon" @error="errorEventImg">
                <template v-slot:error>加载失败</template>
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
            <span>{{ item.title }}</span>
          </router-link>
        </div>
      </div>

      <!-- 系统推荐 -->
      <div class="me system">
        <div class="head">
          <h4>系统推荐</h4>
        </div>
        <div class="body">
          <div class="item" @click="$toast('3楼公告版 维护中')">
            <div class="img">
              <img
                src="../assets/img/CommunityView/community-system-1.png"
                alt=""
              />
            </div>
            <span>3楼公告版</span>
          </div>

          <div class="item" @click="$toast('意见反馈 维护中')">
            <div class="img">
              <img
                src="../assets/img/CommunityView/community-system-2.png"
                alt=""
              />
            </div>
            <span>意见反馈</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 右滑进入 -->
    <transition name="van-slide-right">
      <forum-category-list
        @forum-category-list-not-show="ForumCategoryListNotShow"
        @update-view="updateView"
        v-show="ForumCategoryListShow"
      ></forum-category-list>
    </transition>
  </div>
</template>


<script>
import TopTitleBar from "../components/TopTitleBar.vue";
import ForumCategoryList from "../components/ForumCategoryList.vue";
import {
  getBannerList,
  getForumCategoryList,
  getForumCategory,
} from "../assets/api/community.js";
export default {
  data() {
    return {
      bannerList: null,
      ForumCategoryList: null,
      ForumCategoryListShow: false,
    };
  },
  methods: {
    // 初始化
    dataInit() {
      this.BannerListInit();
      this.ForumCategoryListInit();
    },

    // 社区轮播图
    BannerListInit() {
      getBannerList().then((data) => {
        this.bannerList = data.postList;
        console.log("社区轮播图 =>", this.bannerList);
      });
    },

    // 板块列表
    async ForumCategoryListInit() {
      // 在请求时
      this.$store.commit("showLoading");

      // 初始化对象
      let ForumCategoryData = {};

      let data = await getForumCategory();

      // 取数组 并打印
      let categoryforum = data.categoryforum;
      console.log("板块分类 =>", categoryforum);

      // 将拿到的分类数据存放到对象中
      ForumCategoryData.ForumCategory = categoryforum;

      // 初始化对象中数组
      ForumCategoryData.ForumCategoryList = [];

      // 遍历分类数组 将分别请求到数据push进数组 最后打印
      for (let i = 0; i < categoryforum.length; i++) {
        let ForumCategoryList = await getForumCategoryList({
          fum_id: categoryforum[i].id,
        });
        if (ForumCategoryList)
          ForumCategoryData.ForumCategoryList.push(ForumCategoryList);
      }
      console.log("所有板块分类数据 =>", ForumCategoryData);

      // 初始化
      this.ForumCategoryList = [];
      ForumCategoryData.ForumCategoryList.forEach((obj1) => {
        obj1.categories.forEach((obj2) => {
          // if (obj2.isSubscribe) {
          this.ForumCategoryList.push(JSON.parse(JSON.stringify(obj2)));
          // }
        });
      });

      console.log("拿到ForumCategoryList数据 =>", this.ForumCategoryList);
      this.$toast.success("拉取成功");

      // 请求完成后
      this.$store.commit("hideLoading");
    },

    // 图片加载失败
    errorEventImg() {
      console.log("有图片加载失败");
    },

    // 传方法给副组件 用于关闭添加板块的界面
    ForumCategoryListNotShow() {
      console.log("ForumCategoryListNotShow() 被副组件调用");
      this.ForumCategoryListShow = false;
    },

    // 给副组件写的方法 用于改变同步更新视图
    updateView({ id, val }) {
      console.log("updateView({ id, val })方法 被副组件调用");
      let index = this.ForumCategoryList.findIndex(
        (item) => item.categoryID == id
      );
      this.ForumCategoryList[index].isSubscribe = val;
    },
  },
  created() {
    this.dataInit();
  },
  activated() {
    console.log("检查是否有数据加载失败");
    if (!this.bannerList) this.BannerListInit();
    if (!this.ForumCategoryList) this.ForumCategoryListInit();
  },
  components: {
    TopTitleBar,
    ForumCategoryList,
  },
};
</script>


<style lang="scss" scoped>
.Community {
  min-height: 100%;
  background-color: #fff;
  .TopTitleBar {
    .left {
      .icon-xinzengfenlei {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }

    .middle {
      display: flex;
      justify-content: center;
    }

    .right {
      .icon-xiaoxi {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
  }

  .wrap {
    padding-top: 0;
    padding-bottom: 0;

    .banner {
      background-color: #eceaeb;
      position: relative;
      height: 156px;

      .box {
        padding: 7px;
        display: flex;
        justify-content: space-between;
      }

      .img {
        height: 143px;
        width: calc(100% - 110px);
        border-radius: 10px;
        overflow: hidden;
      }

      .right {
        width: 100px;
        padding-right: 10px;
        box-sizing: border-box;

        h6 {
          height: 32px;
          line-height: 16px;
          font-size: 13px;

          span {
            display: block;
            white-space: nowrap;
          }
        }
      }

      .info {
        font-size: 12px;
        color: #626060;
        margin-top: 2px;

        p {
          height: 15px;
          line-height: 15px;
        }

        span {
          height: 36px;
          line-height: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .price {
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          display: block;
          width: 34px;
          height: 12px;
          line-height: 12px;
          color: #fcfbfb;
          border-radius: 3px;
          background-color: #c64027;
          font-size: 12px;
          text-align: center;

          i {
            display: block;
            transform: scale(0.7);
            font-style: normal;
          }
        }

        del {
          display: block;
          color: #2c2c2c;
          font-size: 12px;
        }

        span {
          display: block;
          color: #2c2c2c;
          font-size: 12px;
        }
      }

      .more {
        width: 90px;
        height: 26px;
        border-radius: 3px;
        color: #f9f3f1;
        line-height: 26px;
        text-align: center;
        background-color: #c64027;
        display: block;
      }

      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 5;
        background-color: rgba(0, 0, 0, 0.1);
        color: #fff;
        font-size: 16px;
        height: 26px;
        line-height: 25px;
        padding: 0 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .me {
      .head {
        padding: 0 12px;
        background-color: #f0f0f0;

        h4 {
          height: 33px;
          line-height: 33px;
        }
      }

      .body {
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
      }

      .item {
        width: 50%;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 66px;
        box-sizing: border-box;
        background-color: #fff;
        padding: 0 12px;

        &:active {
          opacity: 0.9;
          box-shadow: 0 0 66px 0 rgba(0, 0, 0, 0.2) inset;
        }

        .img {
          width: 46px;
          height: 46px;
        }

        span {
          display: block;
          width: calc(100% - 61px);
          font-size: 14px;
          color: #3e3e3e;
        }
      }
    }

    // ----
    // ----

    .banner {
      height: unset;

      .my-swipe {
        height: unset;

        .my-swipe-item {
          color: #fff;
          font-size: 20px;
          padding: 5px 5px 0;
          box-sizing: border-box;

          .img {
            width: 100%;
            height: 182px;
            position: relative;

            img {
              height: auto;
            }

            p {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              padding: 0 10px;
              background-color: rgba(0, 0, 0, 0.5);
              font-size: 14px;
              height: 26px;
              line-height: 26px;
            }
          }
        }
      }
    }

    .me {
      .img {
        border-radius: 5px;
        overflow: hidden;
      }
    }
  }
}
</style>